<template>
  <div class="page">
    <div class="group shadow">
      <div class="group-label">今日流量</div>
      <div class="header-index">
        <div class="index-right" style="width: 60px;padding-right: 20px;">
          <div>今日</div>
          <div>昨日</div>
        </div>
        <div>
          <div class="header-label"><img src="../../../assets/img/home/icon-1.png" alt=""> <span>浏览量（PV）</span></div>
          <div class="index-right">
            <div class="item-row">{{ todayFlowData.pv }}
              <img class="updown" v-if="todayFlowData.pv != yesterdayFlowData.pv"
                :src="updownIcon[todayFlowData.pv > yesterdayFlowData.pv ? 0 : 1]">
              <div v-else style="width: 20px;"></div>
            </div>
            <div class="pr20">{{ yesterdayFlowData.pv }}</div>
          </div>
        </div>
        <div>
          <div class="header-label"><img style="height: 30px;" src="../../../assets/img/home/icon-2.png" alt=""> <span>访客量（UV）</span>
          </div>
          <div class="index-right">
            <div class="item-row">{{ todayFlowData.uv }}<img class="updown"
                v-if="todayFlowData.uv != yesterdayFlowData.uv"
                :src="updownIcon[todayFlowData.uv > yesterdayFlowData.uv ? 0 : 1]">
              <div v-else style="width: 20px;"></div>
            </div>
            <div class="pr20">{{ yesterdayFlowData.uv }}</div>
          </div>
        </div>
        <div>
          <div class="header-label"><img src="../../../assets/img/home/icon-3.png" alt=""> <span>IP数</span></div>
          <div class="index-right">
            <div class="item-row">{{ todayFlowData.ip }}<img class="updown"
                v-if="todayFlowData.ip != yesterdayFlowData.ip"
                :src="updownIcon[todayFlowData.ip > yesterdayFlowData.ip ? 0 : 1]">
              <div v-else style="width: 20px;"></div>
            </div>
            <div class="pr20">{{ yesterdayFlowData.ip }}</div>
          </div>
        </div>
        <div>
          <div class="header-label"><img src="../../../assets/img/home/icon-4.png" alt=""> <span>平均访问时长</span></div>
          <div class="index-right">
            <div class="item-row">{{ todayFlowData.times | hhmmss }}<img class="updown"
                v-if="todayFlowData.times != yesterdayFlowData.times"
                :src="updownIcon[todayFlowData.times > yesterdayFlowData.times ? 0 : 1]">
              <div v-else style="width: 20px;"></div>
            </div>
            <div class="pr20">{{ yesterdayFlowData.times | hhmmss }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="tabs">
      <div class="tab" :class="{ actived: i == actived }" @click="actived = i" v-for="(item, i) in days" :key="i">
        {{ item.label }}</div>
    </div>
    <el-row class="mat20" :gutter="20">
      <el-col :span="12" :xs="24">
        <div class="group">
          <div class="group-label">趋势图</div>
          <div class="btntabs">
            <div class="tab" :class="{ actived: 0 == pvuvType }" @click="pvuvType = 0">浏览量(PV)</div>
            <div class="tab" :class="{ actived: 1 == pvuvType }" @click="pvuvType = 1">访客量(UV)</div>
          </div>
          <!-- 趋势图 -->
          <NjaChart class="chart group-body1" id="chart" :data="chartData"></NjaChart>
        </div>
      </el-col>
      <el-col :span="12" :xs="24">
        <div class="group">
          <div class="group-label">Top20浏览内容
            <el-link :underline="false" style="font-weight: 400; margin-left: 20px;"
              :type="0 == orderType ? 'primary' : 'info'" @click="orderType = 0">倒叙</el-link>
            <span style="color: #ccc;"> | </span>
            <el-link :underline="false" style="font-weight: 400;" :type="1 == orderType ? 'primary' : 'info'"
              @click="orderType = 1">正序</el-link>
          </div>
          <ul class="group-body">
            <li v-for="(item, i) in tableData" :key="i" class="list-item" @click="topClickRow(item)">
              <div class="item-img">
                <img class="item-icon" v-if="item.index > 3" :src="icons[3]" />
                <img class="item-icon" v-else :src="icons[item.index]" />
                <div class="item-index">{{ item.index + 1 }}</div>
              </div>
              <div>
                <div class="list-title">{{ item.title }}</div>
                <div>
                  <span class="num">浏览数 {{ item.readNum }}</span>
                  <span class="time">发布时间: {{ item.publishDate }}</span>
                  <span class="tag" v-if="item.tag">
                    {{ item.tag }}
                  </span>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import NjaChart from './chart'
import moment from 'moment'
export default {
  components: { NjaChart },
  data() {
    return {
      actived: 0,
      pvuvType: 0,
      orderType: 0,
      updownIcon: [
        require('@/assets/img/home/up.png'),
        require('@/assets/img/home/down.png')
      ],
      todayFlowData: {
        pv: 0,
        uv: 0,
        ip: 0,
        times: 0
      },
      yesterdayFlowData: {
        pv: 0,
        uv: 0,
        ip: 0,
        times: 0
      },
      days: [
        { label: '今天', code: 0 },
        { label: '昨天', code: 1 },
        { label: '最近7天', code: 7 },
        { label: '最近30天', code: 30 },
      ],
      icons: [
        require('../../../assets/img/home/hot-1.png'),
        require('../../../assets/img/home/hot-2.png'),
        require('../../../assets/img/home/hot-3.png'),
        require('../../../assets/img/home/hot-4.png')
      ],
      appWebPath: process.env.VUE_APP_WEB_PATH,
      hours: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
      chartData: {},
      tableData: []
    }
  },
  filters: {
    knum(num) {
      var reg = /\d{1,3}(?=(\d{3})+$)/g;
      return (num + '').replace(reg, '$&,');
    },
    hhmmss(value) {
      if (!value) {
        return 0
      }
      return moment.utc(value).format('HH:mm:ss');
    }
  },
  watch: {
    actived() {
      this.loadPUUV()
    },
    pvuvType() {
      this.loadPUUV()
    },
    orderType() {
      this.tableData.reverse()
    }
  },
  methods: {
  },
  mounted() {
  }
}
</script>

<style  lang="scss" scoped>
ul,
li {
  list-style-type: none;
}

.page {
  width: 100%;
  font-size: 14px;
  color: #606266;
  position: relative;
  height: 100%;
  overflow: hidden;
}

.page-body {
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.group {
  padding: 20px 30px;
  background: #fff;
  border: 1px solid #e3e8ee;
  border-radius: 5px;
  margin-bottom: 20px;
  overflow: hidden;
}

.row {
  display: flex;
  flex-direction: row;

  height: 420px;
}

.group-label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 20px;
}

.tabs {
  display: flex;
  width: 100%;
  flex-direction: row;
  background-color: #fff;
  font-size: 12px;

  border: 1px solid #e3e8ee;
}

.mat20 {
  margin-top: 20px;
}

.shadow {
  box-shadow: 0px 2px 10px #ccc;
  padding-bottom: 30px;
}

.tab {
  padding: 8px 20px;
  cursor: pointer;
  border-right: 1px solid #e3e8ee;
}

.actived {
  cursor: default;
  user-select: none;
  background-color: $primary-color;
  color: #fff;
}


.line-tab {
  padding: 8px 10px;
  font-size: 14px;
  cursor: pointer;
  background-color: #fff;
  margin-right: 20px;
  margin-left: 20px;
}

.line-tab.actived {
  cursor: default;
  user-select: none;
  color: $primary-color;
  border-bottom: 2px solid $primary-color;
}

.btntabs {
  display: flex;
  flex-direction: row;
  background-color: #fff;
  font-size: 12px;
  width: 160px;
  border: 1px solid #e3e8ee;
  border-radius: 5px;
  overflow: hidden;
}

.btntabs .tab {
  width: 80px;
  padding: 6px 0px;
  text-align: center;
}

.btntabs .tab:last-child {
  border-right: none;
}

.chart {
  width: 100%;
  height: 300px;
}

.group-body {
  overflow-y: auto;
  height: calc(100vh - 500px);
}

.group-body1 {
  overflow-y: auto;
  height: calc(100vh - 515px);
}

.list-item {
  position: relative;
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;
  margin-top: 15px;
  align-items: center;
  cursor: pointer;
}

.list-title {
  font-weight: 500;
  font-size: 16px;
  line-height: 30px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-item:hover .list-title {
  color: #333;
}

.num {
  font-size: 14px;
}

.time {
  margin-left: 20px;
  font-size: 14px;
  color: #999;
}

.tag {
  position: absolute;
  left: 400px;
  font-size: 12px;
  color: rgb(242, 198, 138);
  background-color: rgba(242, 198, 138, 0.3);
  border: 1px solid rgb(242, 198, 138);
  padding: 2px 5px;
  border-radius: 5px;
}

.item-img {
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
}

.item-icon {
  width: 30px;
  height: 30px;

}

.item-index {
  position: absolute;
  color: #fff;
  font-size: 12px;
  bottom: 14px;
}

.header-index {
  margin-top: -20px;
  display: flex;
  width: calc(100% - 100px);
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
}

.index-right {
  text-align: right;
  border-right: 1px solid #e1e2e3;
  display: flex;
  flex-direction: column;
  height: 60px;
  justify-content: space-between;
}

.header-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 40px;
}

.header-label img {
  height: 40px;
  margin-right: 10px;
}

.updown {
  width: 20px;
}

.item-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
}

.pr20 {
  padding-right: 20px;
}

.mat10 {
  margin-top: 15px;
}

@media only screen and (max-width: 640px) {
  .group {
    display: flow-root;
  }
  .header-label {
    span {
      visibility: hidden;
    }
  }
}</style>